<template>
    <div class="equity-page h100 d-flex jc-between ai-end">
        <div class="flex-1 left h100">
            <e-table ref="eTableRef" class="w100 h100" pageName="systemUserPage" maxHeight="calc(100vh - 360px)"
                :requestApi="systemEquityListApi" :columns="columns" @row-click="rowClick">
                <template #header-left="{ ids, list, isSelected }">
                    <div class="page-header d-flex ai-center">
                        <div class="text-center cur-pointer" @click="handleAction('add')">
                            <ft-icon name="el-icon Plus" size="24" color="#E0641C"></ft-icon>
                            <div>添加</div>
                        </div>
                        <div class="ml-50 text-center cur-pointer" @click="handleAction('edit', list)">
                            <ft-icon name="el-icon EditPen" size="24" color="#E0641C"></ft-icon>
                            <div>修改</div>
                        </div>
                        <div class="ml-50 text-center cur-pointer" @click="handleDelList(ids)">
                            <ft-icon name="el-icon CloseBold" size="24" color="#E0641C"></ft-icon>
                            <div>删除</div>
                        </div>
                    </div>
                </template>
                <template #action="{ row, index, pageable }">
                    <div class="d-flex ai-center">
                        <div class="d-flex ai-center cur-pointer" :class="index == 0 ? 'cur-drop' : ''" @click.stop="handleUp(index)">
                            <img src="@/assets/img/icon/up.png" alt="" class="w-12 h-15 mr-12">
                            <span :class="index == 0 ? 'auxiliary-color ' : 'main-color'">向上</span>
                        </div>
                        <div class="d-flex ai-center cur-pointer ml-30"
                            :class="index == pageable.size || index == pageable.total - 1 ? 'cur-drop' : ''"
                            @click.stop="handleDown(index)">
                            <img src="@/assets/img/icon/down.png" alt="" class="w-12 h-15 mr-12">
                            <span :class="index == pageable.size || index == pageable.total - 1 ? 'auxiliary-color ' : 'auxiliary-color'">向下</span>
                        </div>
                    </div>
                </template>
            </e-table>
        </div>
        <div class="flex-1 ml-30 h100">
            <detail :rightData="rightData"/>
        </div>
        <equityDrawer ref="equityDrawerRef"/>
    </div>
</template>
<script setup>
import { systemEquityListApi, systemEquityDelApi } from "@/api/modules/system";
import { useHandleData } from "@/hooks/useHandleData";
import detail from "./detail.vue";
import equityDrawer from "./components/drawer.vue";
const columns = [
    {
        type: "selection",
    }, {
        type: "index",
        width: 80
    }, {
        label: "权益名称",
        prop: "name",
    }, {
        label: "权益明细",
        prop: "detail",
    }, {
        label: '',
        prop: 'action',
    }
]
const eTableRef = ref();
const { proxy } = getCurrentInstance();
const handleAction = (action, list) => {
    if (action === 'edit' && list.length === 0) {
        return proxy.$modal.msgError('请选择一条数据编辑')
    }
    proxy.$refs.equityDrawerRef.acceptParams({
        list: list ? list[0] : null,
        callback: callback
    });
}
const handleDelList = async(ids) => {
    if (ids.length === 0) {
        return proxy.$modal.msgError('请选择要删除的数据');
    }
    try {
        await useHandleData(systemEquityDelApi, ids, "删除后无法恢复，请慎重考虑");
        setTimeout(() => {
            const data = eTableRef.value.getData();
            if (data.length == 0) rightData.value = {}
            else rightData.value = data[0];
        }, 100);
    } finally {
        eTableRef.value.refresh();
    }
}
const rightData = ref({});
onMounted(() => {
    setTimeout(() => {
        const data = eTableRef.value.getData();
        if (data.length > 0) {
            rightData.value = data[0];
        }
    }, 100);
})
const rowClick = (row) => {
    rightData.value = row;
}
const callback = (data) => {
    eTableRef.value.refresh();
    rightData.value = data;
}

// 向上
const handleUp = (index) => {
    eTableRef.value.moveUp(index);
}
// 向下
const handleDown = (index) => {
    eTableRef.value.moveDown(index);
}
</script>

<style lang="scss" scoped></style>